<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>商品销售饼图</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var gtype = [];
var count = [];
var data = [];

axios.get("order?op=findOderType").then(rs => {
    // data = rs.data;不能，得是{ value: rs.data[i].count, name: rs.data[i].tname }这种数据形式
    // console.log(data);
    for (var i = 0; i < rs.data.length; i++) {
        gtype.push(rs.data[i].tname);
        count.push(rs.data[i].count);
        // 构建图表数据对象
        data.push({ value: rs.data[i].count, name: rs.data[i].tname });
    }
    // console.log(data);
    // console.log(gtype);
    // console.log(count);
    var option = {
        title: {
            text: '商品分类销售饼图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: gtype
        },
        series: [
            {
                name: '商品类型',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
});
    // let currentIndex = -1;
    //
    // setInterval(function() {
    //     var dataLen = option.series[0].data.length;
    //     // 取消之前高亮的图形
    //     myChart.dispatchAction({
    //         type: 'downplay',
    //         seriesIndex: 0,
    //         dataIndex: currentIndex
    //     });
    //     currentIndex = (currentIndex + 1) % dataLen;
    //     // 高亮当前图形
    //     myChart.dispatchAction({
    //         type: 'highlight',
    //         seriesIndex: 0,
    //         dataIndex: currentIndex
    //     });
    //     // 显示 tooltip
    //     myChart.dispatchAction({
    //         type: 'showTip',
    //         seriesIndex: 0,
    //         dataIndex: currentIndex
    //     });
    // }, 1000);
    // 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>